<!DOCTYPE html>
<html>
	<head>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
var nWaiting,nTitle; // 原生view的等待界面和title
var touchX // nWaiting的点击坐标的x数值
var backPressed; //返回箭头是否处于按下状态
var contentWebview=null; //准备打开百度网址的webview
var bitmap=null; // 返回图标
// H5 plus事件处理
function plusReady(){
	var bdata = '';
	bitmap = new plus.nativeObj.Bitmap('back');
	bitmap.loadBase64Data(bdata, function(){
		bitmap.isLoadSuccess = true;
		nWaiting&&nWaiting.drawBitmap(bitmap,null,{top:'0px',left:'0px',width:'44px',height:'44px'},'backicon');
		console.log('Back bitmap load success');
	}, function(e){
		console.log('Back bitmap load failed: '+JSON.stringify(e));
	});
	
	//创建nWaiting
	creatWaiting();
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready',plusReady,false);
}
// 创建原生View控件
function creatWaiting(){
	//判断view是否已存在，避免重复创建，尤其调试刷新网页时很容易触发重复创建 
	nWaiting = plus.nativeObj.View.getViewById('nWaiting');
	if(nWaiting){
		return;
	}
	nWaiting = new plus.nativeObj.View('nWaiting',{top:'0px',left:'0px',height:'100%',width:'100%'});
	nWaiting.interceptTouchEvent(true);
	
	//初始化绘制nwaiting界面
	nWaiting.drawRect('#f7f7f7',{top:'0px',left:'0px',height:'43px',width:'100%'}) //绘制title背景色
	bitmap&&bitmap.isLoadSuccess&&nWaiting.drawBitmap(bitmap,null,{top:'0px',left:'0px',width:'44px',height:'44px'},'backicon');
//	nWaiting.drawText('<',{top:'0px',left:'10px',width:'28px',height:'44px'},{size:'18px'},'backicon');
	nWaiting.drawText( '标题', {top:'0px',left:'0px',width:'100%',height:'44px'}, {size:'17px'});
	nWaiting.drawRect('rgb(231,231,231)',{top:'43px',left:'0px',height:'1px',width:'100%'}) //绘制title底线
	nWaiting.drawRect('#eeeeee',{top:'44px',left:'0px',width:'100%'}) //绘制等待内容区背景色
	nWaiting.drawText( '加 载 中 ...', {top:'44px',left:'0px',width:'100%',height:'50%'}, {size:'12px',color:'rgb(100,100,100)'});
}

function fillnTitle(){
	nTitle = contentWebview.getNavigationbar();
	nTitle.interceptTouchEvent(true);
	// 处理touchstart、touchmove、touchend事件，实现下效果 
//	nTitle.addEventListener('touchstart', function(e){
//		console.log('touchstart'+e.pageX);
//		touchX = e.pageX;
//		if(touchX>0 && touchX<44){
//			nTitle.drawRect('#e7e7e7', {top:'0px',left:'0px',width:'44px',height:'43px'}, 'backbg');
//			backPressed=true;
//		}
//	});
//	nTitle.addEventListener('touchmove', function(e){
//		console.log('touchmove'+e.pageX);
//		touchX = e.pageX;
//		if(touchX>44 && backPressed){
//			nTitle.drawRect('#f7f7f7', {top:'0px',left:'0px',width:'44px',height:'43px'}, 'backbg');
//			backPressed=false;
//		}
//	});
//	nTitle.addEventListener('touchend', function(e){
//		console.log('touchend'+e.pageX);
//		if(backPressed){
//			nTitle.drawRect('#f7f7f7', {top:'0px',left:'0px',width:'44px',height:'43px'}, 'backbg');
//			backPressed=false;
//		}
//	});
	// 处理点击事件
	nTitle.addEventListener('click', function(e){
		touchX = e.pageX;
		if(touchX>3 && touchX<44){
			back();
		}
	});
	//补充绘制nTitle界面
	nTitle.drawRect('#f7f7f7', {top:'0px',left:'0px',height:'43px',width:'100%'}) //绘制title背景色
//	nTitle.drawRect('#f7f7f7', {top:'0px',left:'0px',width:'44px',height:'43px'}, 'backbg');
	nTitle.drawBitmap(bitmap, null, {top:'0px',left:'0px',width:'44px',height:'44px'}, 'backicon'); // 绘制返回箭头
	nTitle.drawText('标题', {top:'0px',left:'0px',width:'100%',height:'44px'}, {size:'17px'}); // 绘制标题文字
	nTitle.drawRect('rgb(231,231,231)', {top:'43px',left:'0px',height:'1px',width:'100%'}); //绘制title底线
}

function nWaitingShow () {
	plus.nativeObj.View.startAnimation({type:'slide-in-right'},nWaiting,null,function () {
		console.log('startAnimation finished.');
	});
	contentWebview = plus.webview.create('http://m.weibo.cn/u/3196963860', 'contendWebview', {'navigationbar':{'backgroundcolor':'#f7f7f7','titletext':'标题','titlecolor':'#000000'}});
	// 更新Webview的原生头内容
	setTimeout(function(){
		fillnTitle();
	},100);
	contentWebview.addEventListener('close', function(){
		contentWebview=null;
	})
	contentWebview.addEventListener('titleUpdate', function(){
		contentWebview.append(nTitle);
		contentWebview.show();
		plus.nativeObj.View.clearAnimation();
	});
}
// 重写返回处理
var _back=window.back;
function safeback(){
	contentWebview?contentWebview.close('slide-out-right'):(bitmap&&bitmap.clear(),nWaiting&&nWaiting.clear(),_back());
}
window.back=safeback;
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
	</head>
	<body>
		<header id="header">
			<div class="nvbt iback" onclick="back()"></div>
			<div class="nvtt">原生View过渡动画示例</div>
			<div class="nvbt"></div>
		</header>
		<div id="content" class="content">
			<p class="des">
	使用nview来做转场动画，以及使用原生view做标题栏。
			</p>
			<div class="button" onclick="nWaitingShow()">演示</div>
			<p class="des" style="font-weight:bold;text-indent:0;">
	逻辑简述：
			</p>
			<p class="des">
	启动后先创建一个原生waiting界面，但不显示。
	点击show按钮后，原生waiting做动画进来，同时然后创建一个带原生View控件导航栏的contentWebview加载网络页面，等titleUpdate后显示contentWebview并关闭原生waiting界面。
			</p>
		</div>
	</body>
</html>